<template>
  <div class="audit-container">
    <div class="page-header">
      <h2>骑手入驻审核</h2>
    </div>
    
    <el-table :data="riderList" style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="联系电话"></el-table-column>
      <el-table-column prop="idNumber" label="身份证号" width="180"></el-table-column>
      <el-table-column prop="vehicleType" label="交通工具">
        <template slot-scope="scope">
          {{ getVehicleTypeName(scope.row.vehicleType) }}
        </template>
      </el-table-column>
      <el-table-column prop="createdTime" label="申请时间" width="180"></el-table-column>
      <el-table-column label="审核状态" width="100">
        <template>
          <el-tag type="warning">待审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="showDetails(scope.row)">查看详情</el-button>
          <el-dropdown split-button type="primary" size="mini" @command="handleCommand($event, scope.row)">
            审核
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="approve">通过</el-dropdown-item>
              <el-dropdown-item command="reject">拒绝</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 详情对话框 -->
    <el-dialog title="骑手详情" :visible.sync="dialogVisible" width="50%">
      <div v-if="currentRider">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ currentRider.name }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentRider.phone }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ currentRider.idNumber }}</el-descriptions-item>
          <el-descriptions-item label="交通工具">{{ getVehicleTypeName(currentRider.vehicleType) }}</el-descriptions-item>
          <el-descriptions-item label="身份证照片" :span="2">
            <el-image 
              style="width: 200px; height: 120px; margin-right: 10px;" 
              :src="currentRider.idCardFront" 
              fit="cover">
            </el-image>
            <el-image 
              style="width: 200px; height: 120px;" 
              :src="currentRider.idCardBack" 
              fit="cover">
            </el-image>
          </el-descriptions-item>
          <el-descriptions-item label="骑手照片" :span="2">
            <el-image 
              style="width: 200px; height: 200px" 
              :src="currentRider.riderPhoto" 
              fit="cover">
            </el-image>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="success" @click="approveRider">通过</el-button>
        <el-button type="danger" @click="rejectRider">拒绝</el-button>
      </span>
    </el-dialog>

    <!-- 审核理由对话框 -->
    <el-dialog title="审核意见" :visible.sync="reasonDialogVisible" width="30%">
      <el-form>
        <el-form-item label="审核意见">
          <el-input type="textarea" v-model="auditReason" :rows="4" placeholder="请输入审核意见"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reasonDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAudit">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPendingRiders, getRiderDetail, auditRider } from '@/api/rider';

export default {
  name: 'RiderAudit',
  data() {
    return {
      loading: false,
      riderList: [],
      dialogVisible: false,
      reasonDialogVisible: false,
      currentRider: null,
      auditReason: '',
      auditAction: 'approve' // 'approve' 或 'reject'
    }
  },
  created() {
    this.fetchRiderList();
  },
  methods: {
    // 获取骑手列表数据
    fetchRiderList() {
      this.loading = true;
      getPendingRiders()
        .then(res => {
          this.riderList = res.data || [];
        })
        .catch(err => {
          console.error('获取骑手列表失败', err);
          this.$message.error('获取骑手列表失败');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    getVehicleTypeName(type) {
      const types = {
        'bicycle': '自行车',
        'scooter': '电动车',
        'motorcycle': '摩托车'
      };
      return types[type] || type;
    },
    
    showDetails(rider) {
      this.loading = true;
      getRiderDetail(rider.id)
        .then(res => {
          this.currentRider = res.data;
          this.dialogVisible = true;
        })
        .catch(err => {
          console.error('获取骑手详情失败', err);
          this.$message.error('获取骑手详情失败');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    handleCommand(command, rider) {
      this.currentRider = rider;
      this.auditAction = command;
      this.reasonDialogVisible = true;
    },
    
    approveRider() {
      this.auditAction = 'approve';
      this.reasonDialogVisible = true;
    },
    
    rejectRider() {
      this.auditAction = 'reject';
      this.reasonDialogVisible = true;
    },
    
    confirmAudit() {
      // 如果是拒绝操作但没有填写拒绝原因
      if (this.auditAction === 'reject' && !this.auditReason) {
        this.$message.warning('请输入拒绝原因');
        return;
      }
      
      const params = {
        id: this.currentRider.id,
        status: this.auditAction === 'approve' ? 1 : 2,
        reason: this.auditAction === 'reject' ? this.auditReason : ''
      };
      
      this.loading = true;
      auditRider(params)
        .then(() => {
          this.$message({
            type: this.auditAction === 'approve' ? 'success' : 'warning',
            message: this.auditAction === 'approve' ? '审核已通过' : '已拒绝该申请'
          });
          
          // 刷新列表
          this.fetchRiderList();
          
          // 关闭对话框
          this.reasonDialogVisible = false;
          this.dialogVisible = false;
          this.auditReason = '';
        })
        .catch(err => {
          console.error('审核操作失败', err);
          this.$message.error('审核操作失败');
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
}
</script>

<style scoped>
.audit-container {
  padding: 20px;
}
.page-header {
  margin-bottom: 20px;
}
.el-dropdown {
  margin-left: 5px;
}
</style> 